<template>
  <div class="container card">
    <el-form ref="ruleFormRef" :rules="checkRtp(multiLanguages)" :model="rtpFrom" status-icon label-position="top">
      <el-form-item prop="rtpPortStart" :label="multiLanguages('rtp_port_start')">
        <el-input size="large" type="number" v-model.trim="rtpFrom.rtpPortStart" />
      </el-form-item>
      <el-form-item prop="rtpPortEnd" :label="multiLanguages('rtp_port_end')">
        <el-input size="large" type="number" v-model.trim="rtpFrom.rtpPortEnd" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { FormInstance } from "element-plus";
import { initRtpFrom, checkRtp } from "./form";
const props = defineProps<{
  multiLanguages: any;
}>();
/**表单对象 */
const ruleFormRef = ref<FormInstance>();
const rtpFrom = reactive(initRtpFrom);
const validate = async () => {
  await ruleFormRef.value!.validate(valid => {
    if (valid) {
      return "pass";
    } else {
      return "rtpPorts";
    }
  });
};
defineExpose([{ validate }]);
</script>
<style scoped lang="less">
.container {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  .el-form {
    width: 50%;
  }
}
</style>
